<template>
  <div class="total">

    <!-- 整体布局 -->
    <div class="container left-panel-active">
        

        <!-- 登录框 -->
        <div class="container_from container--signin">
            <form action="" class="from" id="from2">
                <h2 class="from_title">欢迎登录</h2>
                <input type="email" placeholder="Email" class="input" v-model="user.email"/>
                <input type="password" placeholder="Password" class="input" v-model="user.password"/>
                <a href="#" class="link">忘记密码？</a>
                <button class="btn" @click="submitLogin()">登录</button>
            </form>
        </div>

        <!-- 注册框 -->
        <div class="container_from container--signup">
            <form action="" class="from" id="from1">
                <h2 class="from_title">注册账号</h2>
                <input type="text" placeholder="UserName" class="input" v-model="params.nickname"/>
                <input type="email" placeholder="Email" class="input" v-model="params.email"/>
                <div class="VerificationCode">
                    <input type="text" placeholder="VerificationCode" class="input" v-model="params.code"/>
                    <button class="btn getCode" @click="sendEmailSystem()">GET</button>
                </div>
                <input type="password" placeholder="Password" class="input" v-model="params.password"/>
                <button class="btn"  @click="submitRegister()">点击注册</button>
            </form>
        </div>

        <div class="container_overlay">
            <div class="overlay">
                <div class="overlay_panel overlay--left">
                    <button class="btn" id="signin">已有账号，直接登录</button>
                </div>

                <div class="overlay_panel overlay--right">
                    <button class="btn" id="signup">没有账号，点击注册</button>
                </div>
            </div>
        </div>

    </div>


    <!--<div class="sign-up-container">
      <el-form ref="userForm" :model="user">

        <el-form-item class="input-prepend restyle" prop="email" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkEmail, trigger: 'blur'}]">
          <div >
            <el-input type="text" placeholder="邮箱" v-model="user.email"/>
            <i class="iconfont icon-phone" />
          </div>
        </el-form-item>

        <el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="密码" v-model="user.password"/>
            <i class="iconfont icon-password"/>
          </div>
        </el-form-item>
        <div class="btn">
          <input type="button" class="sign-in-button" value="登录" @click="submitLogin()">
        </div>
      </el-form>
    </div>-->

  </div>
</template>
<script>
  import '~/assets/css/sign.css'
  import '~/assets/css/iconfont.css'

  import cookie from 'js-cookie'

  import loginApi from '@/api/login'
  import registerApi from '@/api/register'

  export default {
    layout: 'sign',
    data () {
      return {
        user:{
          email:'',
          password:''
        },
        params: {
          email: '',
          code: '',
          nickname: '',
          password: ''
        },
      }
    },
mounted () {
    const signinBtn = document.getElementById("signin")
    const signupBtn = document.getElementById("signup")
    const fistForm = document.getElementById("from1")
    const secondForm = document.getElementById("from2")
    const container = document.querySelector(".container")

    signinBtn.addEventListener("click",()=>{
        container.classList.remove("right-panel-active")
    })
    signupBtn.addEventListener("click",()=>{
        container.classList.add("right-panel-active")
    })
    fistForm.addEventListener("submit",(e)=>e.preventDefault())
    secondForm.addEventListener("submit",(e)=>e.preventDefault())
},
methods: {


        submitRegister(){
        registerApi.userRegister(this.params)
          .then(res=>{
              console.log(res.data.success)
            if(res.data.success){
                this.$message({
                    type: 'success',
                    message: "注册成功"
                })
                const container = document.querySelector(".container")
                container.classList.remove("right-panel-active")
                this.params={}
            }
            
            

          })
      },

      //发送验证码到email
      sendEmailSystem(){
        registerApi.sendEmailSystem(this.params.email)
          .then(res=>{
            //this.sending=false
            //this.timeDown()
          })
      },

      //登录
      submitLogin(){
        //1.传用户信息，获取token
        loginApi.userLogin(this.user)
          .then(res=>{
            //2.将token存入cookie
            //参数1：名称；参数2：值；参数3：作用范围
            cookie.set('userToken',res.data.data.token,{ expires: 7 })
            //4.通过token获取用户信息
            loginApi.getUserInfo()
              .then(res=>{
                //5.把得到的用户信息放到cookie
                cookie.set('userInfo',res.data.data.consumer,{ expires: 7 })
                //回首页
                window.location.href = '/'
              })
          })
      },

      checkEmail (rule, value, callback) {
        //debugger
        if (!(/^[A-Za-zd0-9]+([-_.][A-Za-zd0-9]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test(value))) {
          return callback(new Error('邮箱格式不正确'))
        }
        return callback()
    }
    }
  }
</script>
<style>
   /*.el-form-item__error{
    z-index: 9999999;
  }*/

  /* :root为根伪元素 --为自定义CSS属性 方便我们重复使用同一个属性 使用var()进行使用*/
    :root{
        --white:#e9e9e9;
        --gray:#333;
        --blue:#0367a6;
        --lightblue:#008997;

        --button-radius:0.7rem;
        --max-width:758px;
        --max-height:420px;

        font-size: 16px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
    }
    .total{
        align-items: center;
        background-color: var(--white);
        background: url("https://edu-tianshui.oss-cn-beijing.aliyuncs.com/banner/banner2.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: grid;
        height: 100vh;
        place-items: center;
    }
    .VerificationCode{
        display: flex;
        background-color: #fff;
        border: none;
        width: 100%;
        align-items: center;
    }
    .VerificationCode button{
        padding: 4px 6px;
        margin: 0 10px;
        font-size: 14px;
        width: 60px;
    }
    .VerificationCode input{
        margin: 0;
    }
    .from_title{
        font-weight: 300;
        margin: 0;
        margin-bottom: 1.25rem;
    }
    .link{
        color: var(--gray);
        font-size: 0.9rem;
        margin: 1.5rem 0;
        text-decoration: none;
    }
    .container{
        background-color: var(--white);
        border-radius: var(--button-radius);
        box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25);
        height: var(--max-height);
        max-width: var(--max-width);
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .container_from{
        height: 100%;
        position: absolute;
        top:0;
        transition: all 0.6s ease-in-out;
    }
    .container--signin{
        left: 0;
        width: 50%;
        z-index: 2;
    }
    .container.right-panel-active .container--signin{
        transform: translateX(100%);
    }
    .container--signup{
        left: 0;
        opacity: 0;
        width: 50%;
        z-index: 1;
    }
    .container.right-panel-active .container--signup{
        animation: show 0.6s;
        opacity: 1;
        transform: translateX(100%);
        z-index: 5;
    }
    .container_overlay{
        height: 100%;
        left: 50%;
        overflow: hidden;
        position: absolute;
        top:0;
        transition: transform 0.6s ease-in-out;
        width: 50%;
        z-index: 100;
    }
    .container.right-panel-active .container_overlay{
        transform: translateX(-100%);
    }
    .overlay{
        background-color: var(--lightblue);
        background: url("https://edu-tianshui.oss-cn-beijing.aliyuncs.com/banner/banner2.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        right: 100%;
        position: relative;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
        width: 200%;
    }
    .container.right-panel-active .overlay{
        transform: translateX(50%);
    }
    .overlay_panel{
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        position: absolute;
        text-align: center;
        top: 0;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
        width: 50%;
    }
    .overlay--left{
        transform: translateX(-20%);
    }
    .container.right-panel-active .overlay--left{
        transform: translateX(0);
    }
    .overlay--right{
        right: 0;
        transform: translateX(0);
    }
    .container.right-panel-active .overlay--right{
        transform: translateX(20%);
    }
    .btn{
        background-color: var(--blue);
        background-image: linear-gradient(90deg,var(--blue) 0%,var(--lightblue) 74%);
        border-radius: 20px;
        border: 1px solid var(--blue);
        color: var(--white);
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: bold;
        letter-spacing: 0.1rem;
        padding: 0.6rem 4rem;
        text-transform: uppercase;
        transition: transform 80ms ease-in;
    }
    .form>.btn{
        margin-top: 1.5rem;
    }
    .btn:active{
        transform: scale(0.95);
    }
    .btn:focus{
        outline: none;
    }
    .from{
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 3rem;
        height: 100%;
        text-align: center;
    }
    .input{
        background-color: #fff;
        border: none;
        padding: 0.9rem 0.9rem;
        margin: 0.5rem 0;
        width: 100%;
    }
    @keyframes show {
        0%,
        49.99%{
            opacity: 0;
            z-index: 1;
        }

        50%,
        100%{
            opacity: 1;
            z-index: 5;
        }
    }
</style>